import { Button, ProgressBar } from "antd-mobile";
import React from "react";
import "./sub-item.less";
import icon from "@/assets/images/home/subject.png";
import { useNavigate } from "react-router-dom";

interface Iprop {
  item: Exam;
}

export default function ExamItem({ item }: Iprop) {
  const nav = useNavigate();
  return (
    <div className="sub-item flex">
      <div>
        <img src={icon} alt="" />
      </div>
      <div>
        <h4>{item.title}</h4>
        <p>
          {item.itemCount}/{item.itemCount}
        </p>
        {/* 提个需求，做成随机的 */}
        <ProgressBar percent={100} />
      </div>
      <Button
        color="primary"
        fill="solid"
        onClick={() => {
          nav("/sel/" + item.actionCode);
        }}
      >
        练习
      </Button>
    </div>
  );
}
